<template>
  <view class="indexWraps">
    <view
      v-for="(item, index) in state.healthListNew"
      :key="index"
      @tap="healthInfo(item.healthInfo)"
      :class="[
        'item',
        item.healthInfo == 'blood_fat' || item.healthInfo == 'liver_function' ? 'on' : ''
      ]"
    >
      <view class="top">
        <text
          type=""
          :class="['iconfont img', item.classStyle ? item.classStyle : '']"
          :style="{ color: item.colorStyle }"
        />
        <text class="name">{{ item.name }}</text>
        <text class="meals" v-if="item.healthInfo == 'blood_sugar'">
          {{ item.stateEat ? item.stateEat : '' }}
        </text>
        <text class="date">{{ item.collectTime ? item.collectTime : '' }}</text>
      </view>
      <view
        class="min"
        v-if="
          item.healthInfo == 'BMI' ||
          item.healthInfo == 'whr' ||
          item.healthInfo == 'heart_rate' ||
          item.healthInfo == 'blood_sugar' ||
          item.healthInfo == 'blood_oxygen' ||
          item.healthInfo == 'blood_ketone' ||
          item.healthInfo == 'uric_acid' ||
          item.healthInfo == 'sleep' ||
          item.healthInfo == 'water' ||
          item.healthInfo == 'defecate'
        "
      >
        <view style="display: flex; align-items: center">
          <text class="name">{{ item.itemValue ? item.itemValue : '-' }}</text>
          <img
            v-if="item.normalFlag && (item.normalFlag == 'H' || item.normalFlag == 'H+')"
            class="trend"
            src="https://ainengli.meilianshuke.com/jkhx/common/health-portrait-up.png"
            alt=""
          />
          <img
            v-if="item.normalFlag && item.normalFlag == 'L'"
            class="trend on"
            src="https://ainengli.meilianshuke.com/jkhx/common/health-portrait-up.png"
            alt=""
          />
        </view>
        <text class="unit">{{ item.unit }}</text>
      </view>
      <view class="min" v-else-if="item.healthInfo == 'blood_pressure'">
        <view style="display: flex; align-items: center">
          <text class="name">
            {{ item.itemValue ? parseInt(item.itemValue) : '-' }}
          </text>
          <img
            v-if="item.normalFlag == 'H' || item.normalFlag == 'H+'"
            class="trend default"
            src="https://ainengli.meilianshuke.com/jkhx/common/health-portrait-up.png"
            alt=""
          />
          <img
            v-if="item.normalFlag && item.normalFlag == 'L'"
            class="trend default on"
            src="https://ainengli.meilianshuke.com/jkhx/common/health-portrait-up.png"
            alt=""
          />
          <text v-if="item.itemValueDbp" class="slash">/</text>
          <text class="name" v-if="item.itemValueDbp">
            {{ parseInt(item.itemValueDbp) }}
          </text>
          <img
            v-if="item.normalFlagDbp && (item.normalFlagDbp == 'H' || item.normalFlagDbp == 'H+')"
            class="trend default"
            src="https://ainengli.meilianshuke.com/jkhx/common/health-portrait-up.png"
            alt=""
          />
          <img
            v-if="item.normalFlagDbp && item.normalFlagDbp == 'L'"
            class="trend default on"
            src="https://ainengli.meilianshuke.com/jkhx/common/health-portrait-up.png"
            alt=""
          />
        </view>
        <text class="unit">{{ item.unit }}</text>
      </view>
      <view v-else-if="item.healthInfo == 'blood_fat' || item.healthInfo == 'liver_function'">
        <view class="min" v-for="(itemTwo, indexTwo) in item.indicatorList" :key="indexTwo">
          <text class="name-label">{{
            itemTwo.indicatorName == '高密度脂蛋白胆固醇'
              ? '高密度脂蛋白'
              : itemTwo.indicatorName == '低密度脂蛋白胆固醇（LDL-C）'
              ? '低密度脂蛋白'
              : itemTwo.indicatorName == 'Y-谷氨酰转肽酶'
              ? 'Y-谷氨酰转肽酶(Y-GT)'
              : itemTwo.indicatorName
          }}</text>
          <view class="special-label">
            <text class="name">{{ itemTwo.indicatorValue ? itemTwo.indicatorValue : '-' }}</text>
            <img
              v-if="itemTwo.indicatorStatus == 'H' || itemTwo.indicatorStatus == 'H+'"
              class="trend"
              src="https://ainengli.meilianshuke.com/jkhx/common/health-portrait-up.png"
              alt=""
            />
            <img
              v-if="itemTwo.indicatorStatus == 'L'"
              class="trend on"
              src="https://ainengli.meilianshuke.com/jkhx/common/health-portrait-up.png"
              alt=""
            />
          </view>
          <text class="unit">{{ item.unit }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, watch, ref } from 'vue'
import { parseTime, throttle } from '@/utils/tools'
const props = defineProps({
  message: Object,
  message2: Object
})
const emit = defineEmits(['childEvent'])
const state = reactive({
  healthList: {},
  healthListNew: []
})
watch(
  () => props.message,
  (newValue, oldValue) => {
    state.healthListNew = newValue
  },
  {
    immediate: true,
    deep: true
  }
)
const timeFilter = (t: string) => {
  if (!t) {
    return ''
  }

  const n = new Date()
  const d = parseTime(n, '{y}-{m}-{d}')

  if (t.includes(d)) {
    return parseTime(t, '{h}:{i}')
  } else {
    return parseTime(t, '{m}-{d}')
  }
}

const healthInfo = (type) => {
  uni.navigateTo({
    url: '/module/src/pages/echartsInfo/index?type=' + type
  })
}
</script>

<style lang="scss" scoped>
.indexWraps {
  height: auto;
  .item {
    box-sizing: border-box;
    float: left;
    width: calc(50% - 14rpx);
    padding: 32rpx 24rpx;
    margin-bottom: 24rpx;
    background: #fafafa;
    border: 1rpx solid #e5e6eb;
    border-radius: 16rpx;
    &.on {
      width: 100%;
    }
    &:nth-child(2n + 1) {
      margin-right: 22rpx;
    }

    .top {
      position: relative;
      font-size: 24rpx;
      color: #999;

      .img {
        display: inline-block;
        margin-right: 16rpx;
        font-size: 56rpx;
        vertical-align: middle;
        width: 56rpx;
        height: 56rpx;
      }

      .name {
        display: inline-block;
        font-size: 32rpx;
        font-weight: 700;
        color: #222;
        vertical-align: middle;
      }

      .meals {
        display: inline-block;
        margin-left: 10rpx;
        color: #666;
        vertical-align: middle;
      }

      .date {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
      }
    }

    .min {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-top: 24rpx;

      .name-label {
        width: 200rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #222;
      }

      .name {
        font-size: 40rpx;
        font-weight: 700;
        color: #222;
      }

      .slash {
        display: inline-block;
        margin: 0 5rpx;
        vertical-align: middle;
      }

      .trend {
        display: inline-block;
        width: 18rpx;
        height: 18rpx;
        margin-left: 8rpx;
        vertical-align: middle;

        &.on {
          transform: rotate(-180deg);
        }

        &.default {
          margin: 0;
        }
      }

      .date {
        font-size: 24rpx;
        color: #999;
      }

      .unit {
        font-size: 28rpx;
        color: #999;
      }
    }
  }
}
</style>
